<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="/js/vue.js"></script>
    <!--    引入样式  在线 -->
    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <!--    引入组件库  在线-->
    <!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <!--    引入样式  离线 -->
    <link rel="stylesheet" href="/css/index.css">
    <!--    引入组件库  离线-->
    <script src="/js/index.js"></script>

    <!--引入axios.js   在线-->
    <!--    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
    <!--引入axios.js   离线-->
    <script src="/js/axios.min.js"></script>


    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .el-row {
            margin-bottom: 20px;

        }
            :last-child {
                margin-bottom: 0;
            }


        .el-col {
            border-radius: 4px;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 4px;
            height: 100px;
        }
            .row-bg {
                padding: 10px 0;
                background-color: #f9fafc;
            }


        .top-left {
            float: left;
            margin-left: 100px;
            line-height: 100px;
            font-size: 30px;
            color: #5daf34;
        }

        .logo {
            width: 100px;
            height: 100px;
            float: left;
        }

        .top-right {
            height: 100px;
            line-height: 100px;
            float: right;
            margin-right: 50px;
            font-size: 18px;
        }

        .login {

            float: left;
            margin-left: 400px;
            line-height: 100px;
            font-size: 20px;
        }

        .login a {

            margin-top: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 140px;
            height: 45px;
            color: #5daf34;
            text-decoration: none;
            border: 1px solid #5daf34;
            border-radius: 20px;
        }

        .navi {
            height: 70px;
            background-color: #009994;
        }

        .navi li {
            margin-left: 74px;
            float: left;
            width: 200px;
            display: inline-block;
            font-size: 20px;
            line-height: 70px;
        }

        .navi li a {
            display: inline-block;
            height: 67px;
            text-decoration: none;
            color: #FFFFFF;
        }

        .navi li a:hover {
            border-bottom: 2px solid #FFFFFF;
        }

        /*   轮播属性*/
        .el-carousel__item h3 {

            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 300px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }

        img {
            width: 100%;
            height: 500px;
        }


        .center {
            width: 100%;
            height: 500px;

        }

        .center-left {
            float: left;
        }

        .center-left li {
            list-style: none;
            float: left;
            width: 81px;
            height: 80px;
            background-color: #68ab97;
            margin: 200px 50px 100px 100px;
            line-height: 80px;
            border-radius: 100%;

        }

        .center-right {
            float: right;
        }

        .news {
            width: 100%;
            height: 800px;
            background-image: url("/img/bg9.jpg");
            background-size: cover;

        }

        .news-top {
            width: 100%;
            height: 50px;
            font-size: 30px;
        }

        .news-top span {
            display: block;
            margin-left: 650px;
            list-style: none;
        }

        .news-down {
            width: 100%;
            height: 640px;

        }

        .news-down li {
            margin: 20px 100px;
            list-style: none;
            width: 1200px;
            height: 210px;
            border: 1px solid #c1c2c1;
        }

        .down-1 {
            float: left;
            height: 210px;
            width: 130px;
            font-size: 35px;
            color: #68ab97;
            line-height: 210px;
        }

        .down-2 {
            width: 1000px;
            height: 30px;
            font-size: 20px;
            margin-top: 60px;
        }

        .news-down span {
            width: 1000px;
            height: 100px;
        }

        .bottom {
            width: 100%;
            height: 300px;
            background-color: #009994;
        }

        .bottom-left {
            float: left;
            height: 300px;
            color: #FFFFFF;
            margin-top: 80px;
        }

        .bottom-left p {
            line-height: 40px;
        }

        .bottom-right {
            margin-top: 80px;
            margin-right: 160px;
            float: right;
            height: 300px;
            color: #FFFFFF;
        }

        .bottom-right p {
            line-height: 40px;
        }

        #a {
            text-decoration: none;
            color: #000000;
        }
        #b {
            text-decoration: none;
            color: #000000;
        }

        *::-webkit-scrollbar {
            width: 12px;
            height: 12px;
        }

        *::-webkit-scrollbar-button {
            width: 0px;
            height: 0px;
            display: none;
        }

        *::-webkit-scrollbar-corner {
            background-color: transparent;
        }

        *::-webkit-scrollbar-thumb {
            border: 4px solid rgba(0, 0, 0, 0);
            height: 6px;
            border-radius: 25px;
            background-clip: padding-box;
            background-color: rgba(0, 0, 0, 0.30)
        }
    </style>
</head>
<body>
<div id="max">

    <!--    头部-->
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark">
                <div class="top-left">
                    <img src="/img/logo.png" class="logo">
                    <a>好医生自助医疗系统</a>
                </div>
                <div class="top-right">
                    <p>今日时间:<span id="datetime"></span> <!-- 添加一个用于显示动态日期和时间的div --></p>
                </div>
                <div class="login">
                    <a href="/html/userlogin.html">用户登录</a>
                </div>
            </div>
        </el-col>
    </el-row>
    <!--    导航栏-->
    <div class="navi">
        <ul>
            <li><a href="">网站首页</a></li>
            <li><a href="http://localhost:8080/html/back/front-department.html">科室介绍</a></li>
            <li><a href="#health">健康科普</a></li>
            <li><a href="http://localhost:8080/html/back/front-Journalism-page.html">医院新闻</a></li>
            <li><a href="">医院图片</a></li>
        </ul>
    </div>
    <!--轮播图-->
    <div id="map">

        <el-carousel indicator-position height="500px">
            <el-carousel-item v-for="item in 4" :key="item">
                <img :src="'/img/' + item + '.jpg'" alt="carousel-image">
            </el-carousel-item>
        </el-carousel>
    </div>
    <!--    中间 内容-->
    <div class="center">
        <div class="center-left">
            <li><a  id="a" href="userlogin.html">&nbsp&nbsp预约挂号</a></li>
            <li>&nbsp&nbsp服务指南</li>
            <li>&nbsp&nbsp科室导航</li>
            <li><a id="b" href="userregistration.html">&nbsp&nbsp结果查询</a></li>
        </div>
        <div class=" center-right">
            <img src="/img/img.png">
        </div>
    </div>
    <div class="news">
        <div class="news-top">
            <span id="health">健康科普</span>
        </div>
        <div class="news-down">
            <a>
                <li>
                    <p class="down-1">&nbsp&nbsp&nbsp&nbsp01</p>
                    <p class="down-2">天气变凉对心血管病人有哪些影响</p>
                    <span>天气变凉对心血管病人有一定的影响，需要他们格外注意和采取一些预防措施。
                    以下是一些常见的影响和建议：&nbsp;血管收缩：冷空气会引起血管的收缩，增加心脏的负担。对于心血管病人来说，
                    这可能导致血压升高和血液的流动速度减慢，增加心脏负担
                    。建议他们在寒冷天气中保持温暖，穿着适当，并避免长时间暴露在寒冷环境中。&nbsp;...</span>
                </li>
            </a>
            <a>
                <li>
                    <p class="down-1">&nbsp&nbsp&nbsp&nbsp02</p>
                    <p class="down-2">高血压患者饮食应注意哪些？</p>
                    <span>对于高血压患者来说，饮食是非常重要的，因为合理的饮食可以帮助管理血压并改善整体健康。以下是高血压患者在饮食上应注意的几点
                    ：1.低盐饮食：高盐摄入是导致高血压的重要因素之一。
                    因此，高血压患者应该限制食用高盐食物，如咸菜、腌制品、方便面等，同时避免过多使用调味品和加工食品。
                    建议每天的盐摄入量不超过6克。...</span>
                </li>
            </a>
            <a>
                <li>
                    <p class="down-1">&nbsp&nbsp&nbsp&nbsp03</p>
                    <p class="down-2">高血压患者如何进行运动</p>
                    <span>高血压患者进行适度的运动有助于血压的控制。然而，由于高血压患者的身体状况存在一定的限制，需要在医生的指导下选择适宜的运动方式。安静时血压未能很好控制或超过180/110mmHg 的患者暂时禁止中度及以上的运动。以下是高血压患者进行运动的一些建议：1.咨询医生：在开始任何运动计划之前，高血压患者应该咨询医生的意...</span>
                </li>
            </a>
        </div>
    </div>
    <div class="bottom">
        <div class="bottom-left">
            <p> 系统总机关:666666</p>

            <p> 咨询电话:18239408151 </p>

            <p> 牛顿国际技术中心:0371-666666 </p>

            <p> 监督中心:18239408151 </p>

        </div>
        <div class="bottom-right">

            <p>AAA大学第一附属医院2023版权所有</p>
            <p><a><img src="/img/jc.png" style="height: 10px;width: 10px">豫Icp备88888888号</a></p>
            <p><a><img src="/img/jc.png" style="height: 10px;width: 10px">豫公安网备案41188888888号</a></p>
            <p><a><img src="/img/jc.png" style="height: 10px;width: 10px">豫卫网申【2023】 技术支持:www/AAA科技 </a></p>

        </div>
    </div>
</div>
<script>
    const app = new Vue({
        el: "#map",
        date() {
            return {}
        },
        methods: {
            load() {
                const h = this.$createElement;

                this.$notify({
                    title: '用户你好',
                    message: h('i', {style: 'color: teal'}, '网站正在正在更新中，请休息一下，稍后再试')
                });
            }
        },
        created() {
            this.load()
        }

    })

</script>
<script>
    // JavaScript代码用于显示动态日期和时间
    function updateDateTime() {
        var now = new Date();
        var datetimeDiv = document.getElementById("datetime");
        var date = now.toLocaleDateString(); // 获取当前日期
        var time = now.toLocaleTimeString(); // 获取当前时间
        datetimeDiv.innerHTML = date + " " + time; // 显示当前日期和时间
    }
    setInterval(updateDateTime, 1000); // 每秒更新一次日期和时间
</script>
</body>
</html>